<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <title>OCR</title>
    <style>
        body {
            width: 300px;
            min-height: 100px;
            background-color: #ffffff;
            font-family: pxFont;
            margin-bottom: 10px
        }

        @font-face {
            font-family: pxFont;
            src: url(./images/pxfont.TTF);
        }

        header {
            height: 20px;
            display: flex;
            align-items: center;
            letter-spacing: 2px;
            font-size: 14px;
            font-weight: bold;
        }

        header>svg {
            width: 14px;
            height: 14px;
        }

        .enterSmoke {
            border: none;
            border-radius: 5px;
            width: 76px;
            height: 25px;
            min-height: 25px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(274deg, #ff5722, #ff9800);
            color: #fffae5;
            font-weight: bold;
            font-size: 13px;
            position: relative;
            cursor: pointer;
            filter: drop-shadow(3px 3px 2px #777);
            transition: opacity 0.2s linear, filter 0.4s linear, transform 0.1s linear;
            margin: 0 auto;
            user-select: none;
        }

        @keyframes gasmove {

            0% {
                opacity: 1;
            }

            100% {
                opacity: 0;
            }
        }

        @keyframes firemove {

            0%,
            100% {
                fill: #ff5722;
            }

            50% {
                fill: #000
            }
        }

        /* 烟上的气 */
        .gas {
            animation: gasmove 0.6s linear forwards alternate;
            animation-iteration-count: infinite;
        }

        .gas-fire {
            animation: firemove 1s linear forwards alternate;
            animation-iteration-count: infinite;
        }

        .enterSmoke:hover {
            opacity: 0.7;
        }

        .enterSmoke:hover svg {
            transform: translateY(-2px)
        }

        .enterSmoke:active {
            filter: drop-shadow(3px 4px 5px #999);
            opacity: 0.9;
            transform: translateY(1px);
        }

        .enterSmoke>svg {
            width: 32px;
            height: 32px;
            position: absolute;
            top: -4px;
            right: -15px;
            transition: transform 0.3s linear;
        }

        main {
            display: flex;
            flex-direction: column;
            width: 100%;
            min-height: 100px;
            height: 100%;
            position: relative;
        }

        .panel {
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        .smokeList {
            flex: 1;
            display: flex;
            flex-wrap: wrap;
        }

        .level {
            background: #aaa;
            flex: 1;
        }

        .smokeIcon {
            transform: rotate(155deg)
        }

        .background {
            position: absolute;
            top: 50%;
            left: 60%;
            width: 80%;
            height: 80%;
            transform: translate(-50%, -50%);
            z-index: -1;
        }

        .background>svg {
            width: 80%;
            height: 80%;
            animation: Shake 1s linear forwards alternate;
            animation-iteration-count: infinite;
        }

        @keyframes Shake {

            0%,
            100% {
                transform: rotate(0);
            }

            25% {
                transform: rotate(20deg);
            }

            75% {
                transform: rotate(-20deg);
            }
        }

        .corner {
            position: fixed;
            bottom: 10px;
            right: 10px;
            color: #cccccc;
            cursor: pointer;
            font-size: 13px;
            transition: color 0.3s linear;
            letter-spacing: 1px;
            text-decoration: none;
        }

        .corner:hover {
            color: #ff9800
        }
    </style>
</head>

<body>
    <header>
        <span>今天你吸了吗</span>
        <svg t="1652864747578" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="22891" width="14" height="14">
            <path d="M761.7 988.6H251c-20.8 0-37.7-16.9-37.7-37.7V410.2h586.1v540.6c0 20.9-16.8 37.8-37.7 37.8z"
                fill="#FF4D4D" p-id="22892"></path>
            <path
                d="M732.3 410.2v528.6c0 22.2-18 40.2-40.2 40.2H227.5c7 6 16.1 9.6 26 9.6h505.8c22.2 0 40.2-18 40.2-40.2V410.2h-67.2z"
                fill="#BF2E2E" p-id="22893"></path>
            <path d="M213.4 182h586.1v227.6H213.4z" fill="#FFE8AE" p-id="22894"></path>
            <path d="M229.8 29.3h100.8v245.8H229.8z" fill="#FFAE85" p-id="22895"></path>
            <path d="M225.2 275.1h110v128.1h-110z" fill="#FFFFFF" p-id="22896"></path>
            <path d="M342.7 86.7h110v225.6h-110z" fill="#FFAE85" p-id="22897"></path>
            <path d="M342.7 313.3h110v96.9h-110z" fill="#FFFFFF" p-id="22898"></path>
            <path d="M457.7 324.5h110v84.4h-110zM567.7 324.5h110v84.4h-110z" fill="#FFAE85" p-id="22899"></path>
            <path d="M677.6 324.5h110v84.4h-110z" fill="#FFAE85" p-id="22900"></path>
            <path
                d="M815.4 182c0-8.8-7.2-16-16-16H463.3V86.7c0-5.9-4.8-10.7-10.7-10.7h-110c-0.5 0-0.9 0-1.4 0.1V29.3c0-5.9-4.8-10.7-10.7-10.7H229.8c-5.9 0-10.7 4.8-10.7 10.7V166h-5.8c-8.8 0-16 7.2-16 16v766.6c0 30.9 25.2 56.1 56.1 56.1h505.8c30.9 0 56.1-25.2 56.1-56.1V410.2v-0.4V182zM353.3 97.3H442v204.3h-88.7V97.3z m0 226.6H442v69.6h-88.7v-69.6z m-117.4-38.2h88.7v106.8h-88.7V285.7zM240.4 40H320v224.5h-79.5V40z m543.1 908.4c0 13.3-10.8 24.2-24.2 24.2H253.5c-13.3 0-24.2-10.8-24.2-24.2V874h554.1v74.4z m0-95.7H229.3V426.2h554.1v426.5zM463.3 393.5v-58.4H557v58.4h-93.7z m115 0v-58.4H667v58.4h-88.7z m110 0v-58.4H777v58.4h-88.7z m95.2-79.6H463.3v-0.6-0.5-114.9h320.2v116z"
                fill="#3F2D20" p-id="22901"></path>
        </svg>
    </header>

    <main>
        <div class="panel">
            <div class="smokeList">

            </div>

        </div>
        <button class="enterSmoke">吸一根
            <svg t="1652859808508" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                p-id="22599" width="32" height="32">
                <path
                    d="M246.6048 688.2304a51.3536 51.3536 0 0 0-1.28 72.3968l17.792 18.432a51.3536 51.3536 0 0 0 72.3968 1.2288L814.336 317.952a51.3536 51.3536 0 0 0 1.28-72.4224l-17.792-18.4064a51.3536 51.3536 0 0 0-72.3968-1.28L246.6048 688.256z m-17.7664-18.432L707.584 207.4624c31.3088-30.2592 78.3616-29.44 108.5952 1.8688l17.792 18.432c30.208 31.3088 29.4144 78.336-1.8944 108.5952L353.28 798.6944c-31.3088 30.2592-78.3616 29.44-108.5952-1.8688l-17.792-18.432c-30.208-31.2832-29.3888-78.336 1.92-108.5952z"
                    fill="#222222" p-id="22600"></path>
                <path
                    d="M246.6048 688.2304a51.3536 51.3536 0 0 0-1.28 72.3968l17.792 18.432a51.3536 51.3536 0 0 0 72.3968 1.2288L814.336 317.952a51.3536 51.3536 0 0 0 1.28-72.4224l-17.792-18.4064a51.3536 51.3536 0 0 0-72.3968-1.28L246.6048 688.256z"
                    fill="#FFFFFF" p-id="22601"></path>
                <path class="gas-fire"
                    d="M264.3968 706.6368c-11.0592 10.6752-11.3152 25.1392-0.64 36.1984l17.792 18.432c10.6752 11.0336 25.1392 11.264 36.1984 0.6144 11.0336-10.6752 11.2896-25.1392 0.6144-36.1984l-17.7664-18.432c-10.6752-11.008-25.1648-11.264-36.1984-0.6144z"
                    fill="#FF5B5B" p-id="22602"></path>
                <path
                    d="M614.912 332.544l88.9088 92.0832 110.4896-106.7008a51.3536 51.3536 0 0 0 1.28-72.3968l-17.792-18.4064a51.3536 51.3536 0 0 0-72.3968-1.28l-110.4896 106.7264z m-36.1984-0.6144l128.896-124.4928c31.3088-30.208 78.3616-29.4144 108.5952 1.8944l17.792 18.432c30.208 31.3088 29.4144 78.336-1.8944 108.5952L703.2064 460.8l-124.4928-128.896z"
                    fill="#222222" p-id="22603"></path>
                <path
                    d="M614.912 332.544l88.9088 92.0832 110.4896-106.7008a51.3536 51.3536 0 0 0 1.28-72.3968l-17.792-18.4064a51.3536 51.3536 0 0 0-72.3968-1.28l-110.4896 106.7264z"
                    fill="#FFAA5C" p-id="22604"></path>
                <path class="gas"
                    d="M215.04 350.72c-5.12-5.12-12.8-5.12-17.92 0s-5.12 12.8 0 17.92c20.48 20.48 28.16 43.52 23.04 66.56-2.56 12.8-10.24 23.04-20.48 35.84l-15.36 15.36c-7.68 7.68-12.8 15.36-12.8 23.04-5.12 20.48 5.12 43.52 28.16 66.56 5.12 5.12 12.8 5.12 17.92 0 5.12-5.12 5.12-12.8 0-17.92-17.92-17.92-25.6-33.28-23.04-43.52 0-2.56 2.56-7.68 7.68-10.24l15.36-15.36c15.36-15.36 25.6-30.72 28.16-48.64 5.12-33.28-5.12-61.44-30.72-89.6z"
                    fill="#222222" p-id="22605"></path>
            </svg>
        </button>
        <div class="background">
        </div>
    </main>
    <a href="https://hongbin.xyz" target="_block" class="corner">过往云烟</a>

    <script src="./js/popup.js">
    </script>
</body>

</html>